<template>
    <Transition name="up">
        <div class="toasts" v-show="visible">
            <img class="toast-img" :src="icon" alt="">
            <div class="text">
                <p>{{ text }}</p>
            </div>
            <div class="close" @click.stop="close"></div>
        </div>
    </Transition>
</template>
<script>
import { ref, onMounted, reactive, toRefs, computed } from "vue";
export default {
    name: "toast",
    props: {
        types: {
            type: String,
            default: 'normal'
        },
        text: {
            type: String,
            default: ""
        }
    },
    setup(props) {
        const visible = ref(false);
        const data = reactive({
            success: require('@/assets/img/toast/icon-success.png'),
            normal: require('@/assets/img/toast/icon-normal.png'),
            warning: require('@/assets/img/toast/icon-warning.png'),
            error: require('@/assets/img/toast/icon-error.png'),
        })
        onMounted(() => {
            visible.value = true;
        });
        const close = () => {
            visible.value = false
        }
        const icon = computed(() => {
            let num = '';
            if (props.types == 'success') {
                num = data.success;
            } else if (props.types == 'normal') {
                num = data.normal;
            } else if (props.types == 'warning') {
                num = data.warning;
            } else if (props.types == 'error') {
                num = data.error;
            } else {
                num = data.normal;
            }
            return num
        })
        return { visible, close, icon, ...toRefs(data) };
    },
};
</script>
<style lang="less" scoped>
.toasts {
    width: 32rem;
    padding: 0.27rem 0;
    background: #FFFFFF;
    box-shadow: 0rem 0.05rem 0.11rem 0rem rgba(197, 197, 202, 0.5);
    position: fixed;
    z-index: 9999999999;
    left: 50%;
    top: calc(2.67rem + 8px);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(-50%);
}

.toast-img {
    width: 0.37rem;
    height: 0.37rem;
    margin-right: 0.21rem;
}

.close {
    margin-left: 0.21rem;
    width: 0.64rem;
    height: 0.64rem;
    background: url('@/assets/img/toast/icon-close.png') no-repeat;
    background-size: cover;
}

.text {
    width: 11.44rem;

    p {
        font-size: 0.37rem;
        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #68656C;
        line-height: 0.53rem;
        word-break: keep-all;
    }


}

.up-enter-from {
    top: 0;
    opacity: 0;
}

.up-enter-active {
    transition: all 0.5s;
}

.up-enter-to {
    opacity: 1;
    top: calc(2.67rem + 8px);
}
</style>
